<template>
	<div class="homelist">
		<header>
			<h2>{{proptitle}}</h2>
			<router-link to="/">更多></router-link>
		</header>
		<ul>
			<li v-for="item in FilterList" :key="item.id">
				<img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`" @click="btn(item.id)" />
				<h3>{{item.name}}</h3>
				<span v-show="item.price!=0">￥:{{item.price.toFixed(2)}}</span>
				<span v-show="item.hot!=0">热门:{{item.hot}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'MobileList',
		props: ['proplist', 'proptitle'],
		data() {
			return {
				list: []
			}
		},
		watch: {
			// 如果数据是请求获取，基本上都要监听props的数据，确保获取到数据后在进行循环等操作
			propslist() {
				this.list = this.proplist;
			}
		},
		computed: {
			FilterList() {
				//现在是假数据，不存在时差，直接赋值【后期发起请求后必须删除】
				this.list = this.proplist;
				console.log("==========" + this.proplist);
				//forEach() 只做循环操作
				//map(()={return}) 是一个具有返回值的回调函数
				let filters = this.list.map((item) => {
					console.log("id=========" + item.id);
					return {
						id: item.id,
						name: item.memo ? item.memo : item.name,
						picture: item.picture ? item.picture : item.pic,
						price: !item.price ? 0 : item.price,
						hot: item.hot ? item.hot : 0
					}
					console.log("id=========" + item.id);
				});
				filters.sort((a1, a2) => {
					return this.proptitle == '热门推荐' ? a2.hot - a1.hot : this.proptitle == '新书上市' ? a2.id - a1.id :
						a1.id - a2.id;
				})
				return filters;

			}
		},
		methods: {
			btn(id) {
				this.$get("/api/public/book/findById/" + id).then((resp)=>{
					this.list=resp.data.data
					console.log("this.list======"+this.list.id);
				})
				console.log('跳转页面');
				this.$router.push({
					path: '/mobile/detail',
					query: {
						id: id
					}
				})
			}
		},
	}
</script>

<style scoped>
	.homelist {
		/* 不要有高度 */
		width: 100%;
	}

	.homelist header {
		line-height: 2.5rem;
		display: flex;
		align-items: center;
		/* 两端对其 */
		justify-content: space-between;
		color: #a3806b;
	}

	.homelist header h2 {
		font-size: 1rem;
		margin-left: 0.5rem;
	}

	.homelist header a {
		color: #a3806b;
		/* 行内块 */
		display: inline-block;
		width: 3rem;
		font-size: 0.8rem;
	}

	.homelist ul {
		width: 96%;
		margin: 0 auto 1.5rem;
		display: flex;
		/* 垂直剧中 */
		align-items: center;
		/* 两端对其 */
		justify-content: space-between;
		/* 强制性的换行处理 */
		flex-wrap: wrap;
	}

	.homelist ul li {
		width: 46%;
		overflow: hidden;
		margin-left: 0.6rem;
		margin-bottom: 0.5rem;
		background-color: white;
		/* 相对定位 */
		position: relative;
		text-align: center;
	}

	.homelist ul li img {
		width: 80%;
		height: 10rem;
		margin-top: 1rem;
	}

	.homelist ul li h3 {
		width: 100%;
		/* 要给高度 */
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.8rem;
		/* 透明蒙版 */
		background-color: rgba(245, 213, 160, 0.5);
		color: #a68b5b;
		text-align: center;
		/* 去除hx标签的加粗样式 */
		font-weight: normal;
		/* 中文强制不换行 */
		white-space: nowrap;
		overflow: hidden;
		/* 文本溢出省略 */
		text-overflow: ellipsis;


		/* 支持webkit内核的浏览器才能生效  移动端不考虑浏览兼容要考虑系统兼容 */
		/* 溢出隐藏 */
		/* overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; */
		/* 神说盒子两端对齐 */
		/* -webkit-box-orient: vertical;
		-webkit-line-clamp: 2; */
	}

	.homelist ul li span {
		font-size: 0.7rem;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		top: 0;
		right: 0;
		color: gold;
		padding: 0.4rem 0.3rem;
		/*左上 右上 右下  左下 */
		border-radius: 0 0 0 0.6rem;
	}
</style>